<!DOCTYPE html>
<!-- saved from url=(0056)http://startbootstrap.com/templates/simple-sidebar.html# -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Panel</title>
<script src="<?php echo base_url();?>js/chart.js"></script>
<?php $this->load->view('panel_head');?>
</head>

<body>
<div style="background-color:#333; height:46px; width:100%; position:fixed; z-index:10000;">
  <?php $this->load->view('panel_header');?>
</div>
<div style="height:46px;"></div>
<div id="wrapper"> 
  
  <!-- Sidebar -->
  <div id="sidebar-wrapper">
    <?php $this->load->view('panel_sidebar');?>
  </div>
  
  <!-- Page content -->
  <div id="page-content-wrapper">
    <div class="content-header">
      <h1><span class="glyphicon glyphicon-th-large"></span>&nbsp;Dashboard</h1>
    </div>
    <!-- Keep all page content within the page-content inset div! -->
    
    <div class="page-content inset"> 
    <div class="panel panel-default">
        <div class="panel-body">
          <div class="row">
            <div class="col-md-6">
              <table>
                <tr>
                  <td width="130">Web Service Name</td>
                  <td width="20">:</td>
                  <td>Stream Project</td>
                </tr>
                <tr>
                  <td>Website Address</td>
                  <td>:</td>
                  <td><a href=<?php echo base_url();?>><?php echo base_url();?></a></td>
                </tr>
              </table>
              </br>
            </div>
            <!-- <div class="col-md-6"> -->
            <div class="col-md-6">
              <table >
                <tr valign="top">
                  <td width="130">Logo</td>
                  <td width="20">:</td>
                  <td height="60" ><img data-src="holder.js/120x60" class="img-thumbnail"></td>
                </tr>
              </table>
            </div>
            <!-- <div class="col-md-6"> --> 
          </div>
          <!-- <div class="row"> --> 
          
        </div>
        <!-- <div class="panel-body"> --> 
        
      </div>
    
    
    
      <!-- <div class="panel panel-default"> -->
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="row">
            <div class="col-md-6">
              <table>
                <tr>
                  <td width="130em">Streaming Server</td>
                  <td width="20em">:</td>
                  <td>1350 files</td>
                </tr>
                <tr>
                  <td>all Vdo files</td>
                  <td>:</td>
                  <td>2</td>
                </tr>
              </table>
              </br>
            </div>
            <!--  <div class="col-md-6"> -->
            <div class="col-md-6">
              <table>
                <tr>
                  <td width="130em">User Online</td>
                  <td width="20em">:</td>
                  <td>845</td>
                </tr>
                <tr>
                  <td>Member Online</td>
                  <td>:</td>
                  <td>540</td>
                </tr>
                <tr>
                  <td>Total Member</td>
                  <td>:</td>
                  <td>1280</td>
                </tr>
              </table>
            </div>
            <!--  <div class="col-md-6"> --> 
          </div>
          <!-- <div class="row"> --> 
          
        </div>
        <!-- <div class="panel-body"> --> 
        
      </div>
      <!-- <div class="panel panel-default"> -->
      
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="row">
            <div class="col-md-6">
              <table>
                <tr>
                  <td rowspan="3" width="25%" style="padding-top:10px"><font color="#5cb85c" size="+6"><span class="glyphicon glyphicon-hdd"></span></font></td>
                  <td>Streaming_01 (202.151.23.1)</td>
                </tr>
                <tr>
                  <td><div class="progress">
                      <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 97.66%;">97.66%</div>
                    </div></td>
                </tr>
                <tr>
                  <td><font color="#ff0000">24 GB free of 1024 GB</font></td>
                </tr>
              </table>
            </div>
            <div class="col-md-6">
              <table>
                <tr>
                  <td width="130em">Vdo files</td>
                  <td width="20em">:</td>
                  <td>850 files</td>
                </tr>
                <tr>
                  <td>CPU usage</td>
                  <td>:</td>
                  <td>24 %</td>
                </tr>
                <tr>
                  <td>Core Temp</td>
                  <td>:</td>
                  <td>56 C</td>
                </tr>
                <tr>
                  <td>Memory usage</td>
                  <td>:</td>
                  <td>0.65 GB of 4 GB</td>
                </tr>
              </table>
            </div>
          </div>
          <!-- <div class="row"> --> 
        </div>
        <!-- <div class="panel-body"> --> 
        
      </div>
      <!-- <div class="panel panel-default"> -->
      
    
   
      
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="row">
            <div class="col-md-6">
              <table>
                <tr>
                  <td rowspan="3" width="25%" style="padding-top:10px"><font color="d9534f" size="+6"><span class="glyphicon glyphicon-remove"></span></font></td>
                  <td>Streaming_02 (202.151.23.2)</td>
                </tr>
                <tr>
                  <td><div class="progress">
                      <div class="progress-bar progress-bar-success	" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 34.13%;">34.13%</div>
                    </div></td>
                </tr>
                <tr>
                  <td>300 GB free of 1024 GB</td>
                </tr>
              </table>
            </div>
            <div class="col-md-6">
              <table>
                <tr>
                  <td width="130em">Vdo files</td>
                  <td width="20em">:</td>
                  <td>850 files</td>
                </tr>
                <tr>
                  <td>CPU usage</td>
                  <td>:</td>
                  <td>11 %</td>
                </tr>
                <tr>
                  <td>Core Temp</td>
                  <td>:</td>
                  <td>61 C</td>
                </tr>
                <tr>
                  <td>Memory usage</td>
                  <td>:</td>
                  <td>1.25 GB of 4 GB</td>
                </tr>
              </table>
            </div>
          </div>
          <!-- <div class="row"> --> 
        </div>
        <!-- <div class="panel-body"> --> 
        
      </div>
      <!-- <div class="panel panel-default"> -->
      
      <div >
        <table class="table table-bordered">
          <tr>
            <td colspan="3" class="bg-primary">
            <div style="float:left;"><h4>Top Keyword</h4></div>
            <div style="float:right;"><select class="form-control">
              <option value="10">10 results</option>
              <option value="20">20 results</option>
              <option value="50">50 results</option>
            </select></div>
              </td>
              
          </tr>
          <tr class="info" align="center">
            <td width="5%"><strong>ID</strong></td>
            <td width="78%" align="left"><strong>Top Keyword</strong></td>
            <td width="17"><strong>Counts</strong></td>
          </tr>
          <tbody >
            <tr>
              <td>1</td>
              <td>Music</td>
              <td>98122</td>
            </tr>
            <tr>
              <td>2</td>
              <td>E-larning</td>
              <td>86333</td>
            </tr>
            <tr>
              <td>3</td>
              <td>Science</td>
              <td>50562</td>
            </tr>
            <tr>
              <td>4</td>
              <td>KKU</td>
              <td>40001</td>
            </tr>
            <tr>
              <td>5</td>
              <td>SC</td>
              <td>39886</td>
            </tr>
          <tbody>
        </table>
      </div>
      <!-- /div class="table-responsive-->
      
      <div>
        <table class="table table-bordered">
          <tr>
            <td colspan="4" class="bg-primary">
            	<div style="float:left;">
            	  <h4>Top View</h4></div>
            <div style="float:right;"><select class="form-control">
              <option value="10">10 results</option>
              <option value="20">20 results</option>
              <option value="50">50 results</option>
            </select></div>
            </td>
          </tr>
          <tr class="info" align="center">
            <td width="5%"><strong>No</strong></td>
            <td width="79%" align="left"><strong>Vdo Name</strong></td>
            <td width="8%"><strong>Counts</strong></td>
            <td width="8"><strong>Manage</strong></td>
          </tr>
          <tr>
            <td>1</td>
            <td>Presentation Faculty of Science</td>
            <td>8122</td>
            <td align="center"><button class="btn btn-primary " data-toggle="modal" data-target="#topview"><span class="
glyphicon glyphicon-edit"></span>&nbsp;Edit</button></td>
          </tr>
          <tr>
            <td>2</td>
            <td>Science Week 2012</td>
            <td>6333</td>
            <td align="center"><button class="btn btn-primary " data-toggle="modal" data-target="#topview"><span class="
glyphicon glyphicon-edit"></span>&nbsp;Edit</button></td>
          </tr>
          <tr>
            <td>3</td>
            <td>Show Cheer</td>
            <td>5562</td>
            <td align="center"><button class="btn btn-primary " data-toggle="modal" data-target="#topview"><span class="
glyphicon glyphicon-edit"></span>&nbsp;Edit</button></td>
          </tr>
          <tr>
            <td>4</td>
            <td>Freshy Science</td>
            <td>4001</td>
            <td align="center"><button class="btn btn-primary " data-toggle="modal" data-target="#topview"><span class="
glyphicon glyphicon-edit"></span>&nbsp;Edit</button></td>
          </tr>
          <tr>
            <td>5</td>
            <td>Science Show</td>
            <td>3886</td>
            <td align="center"><button class="btn btn-primary " data-toggle="modal" data-target="#topview"><span class="
glyphicon glyphicon-edit"></span>&nbsp;Edit</button></td>
          </tr>
        </table>
      </div>
      <!-- <div class="table-responsive"> -->
      
      <div class="row">
        <div class="col-md-6">
          <div  style="width:100%; float:left; " >
            <table class="table table-bordered" >
              <tr>
                <td colspan="4" class="bg-green">
                	<div style="float:left;">
                	  <h4>Top Like</h4></div>
            <div style="float:right;"><select class="form-control">
              <option value="10">10 results</option>
              <option value="20">20 results</option>
              <option value="50">50 results</option>
            </select></div>
                </td>
              </tr>
              <tr class="success" align="center">
                <td width="10%"><strong>No</strong></td>
                <td align="left" width="56.5%"><strong>Vdo Name</strong></td>
                <td width="16.5%"><strong>Like</strong></td>
                <td width="17%" ><strong>Manage</strong></td>
              </tr>
              <tr>
                <td>1</td>
                <td>Presentation Faculty of Science</td>
                <td>8122</td>
                <td align="center"><button class="btn btn-primary " data-toggle="modal" data-target="#toplike"><span class="
glyphicon glyphicon-edit"></span>&nbsp;Edit</button></td>
              </tr>
              <tr>
                <td>2</td>
                <td>Science Week 2012</td>
                <td>6333</td>
                <td align="center"><button class="btn btn-primary " data-toggle="modal" data-target="#toplike"><span class="
glyphicon glyphicon-edit"></span>&nbsp;Edit</button></td>
              </tr>
              <tr>
                <td>3</td>
                <td>Show Cheer</td>
                <td>5562</td>
                <td align="center"><button class="btn btn-primary " data-toggle="modal" data-target="#toplike"><span class="
glyphicon glyphicon-edit"></span>&nbsp;Edit</button></td>
              </tr>
              <tr>
                <td>4</td>
                <td>Freshy Science</td>
                <td>4001</td>
                <td align="center"><button class="btn btn-primary " data-toggle="modal" data-target="#toplike"><span class="
glyphicon glyphicon-edit"></span>&nbsp;Edit</button></td>
              </tr>
              <tr>
                <td>5</td>
                <td>Science Show</td>
                <td>3886</td>
                <td align="center"><button class="btn btn-primary " data-toggle="modal" data-target="#toplike"><span class="
glyphicon glyphicon-edit"></span>&nbsp;Edit</button></td>
              </tr>
            </table>
          </div>
          <!--   <div class="table-responsive"> --> 
        </div>
        <!-- <div class="col-md-6"> -->
        <div class="col-md-6">
          <div style="width:100%; float:left;">
            <table class="table table-bordered" >
              <tr>
                <td colspan="4" class="bg-red">
                	<div style="float:left;">
                	  <h4>Top Unlike</h4></div>
            <div style="float:right;"><select class="form-control">
              <option value="10">10 results</option>
              <option value="20">20 results</option>
              <option value="50">50 results</option>
            </select></div>
                </td>
              </tr>
              <tr class="danger" align="center">
                <td width="10%"><strong>No</strong></td>
                <td align="left" width="56.5%"><strong>Vdo Name</strong></td>
                <td width="16.5%"><strong>Like</strong></td>
                <td width="17%"><strong>Manage</strong></td>
              </tr>
              <tr>
                <td>1</td>
                <td>Presentation Faculty of Science</td>
                <td>8122</td>
                <td align="center"><button class="btn btn-primary " data-toggle="modal" data-target="#topunlike"><span class="
glyphicon glyphicon-edit"></span>&nbsp;Edit</button></td>
              </tr>
              <tr>
                <td>2</td>
                <td>Science Week 2012</td>
                <td>6333</td>
                <td align="center"><button class="btn btn-primary " data-toggle="modal" data-target="#topunlike"><span class="
glyphicon glyphicon-edit"></span>&nbsp;Edit</button></td>
              </tr>
              <tr>
                <td>3</td>
                <td>Show Cheer</td>
                <td>5562</td>
                <td align="center"><button class="btn btn-primary " data-toggle="modal" data-target="#topunlike"><span class="
glyphicon glyphicon-edit"></span>&nbsp;Edit</button></td>
              </tr>
              <tr>
                <td>4</td>
                <td>Freshy Science</td>
                <td>4001</td>
                <td align="center"><button class="btn btn-primary " data-toggle="modal" data-target="#topunlike"><span class="
glyphicon glyphicon-edit"></span>&nbsp;Edit</button></td>
              </tr>
              <tr>
                <td>5</td>
                <td>Science Show</td>
                <td>3886</td>
                <td align="center"><button class="btn btn-primary " data-toggle="modal" data-target="#topunlike"><span class="
glyphicon glyphicon-edit"></span>&nbsp;Edit</button></td>
              </tr>
            </table>
          </div>
          <!-- <div class="table-responsive"> --> 
        </div>
        <!-- <div class="col-md-6"> --> 
      </div>
      <!-- <div class="row"> --> 
      
    </div>
    <!-- <div class="page-content inset"> --> 
    
  </div>
  <!--  <div id="page-content-wrapper"> --> 
  
</div>
<!-- <div id="wrapper"> --> 

<!-- Top Like -->
<div class="modal fade " id="toplike" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Top Like</h4>
      </div>
      <div class="modal-body">
        <table width="100%">
          <tr>
            <td colspan="3">Presentation Faculty of Science</td>
          </tr>
          <tr>
            <td width="32%" height="45em">Like</td>
            <td width="7%">:</td>
            <td width="61%"><input type="text" class="form-control" value="8122"></td>
          </tr>
          <tr>
            <td colspan="3" align="right" ><button type="button" class="btn btn-warning">Save</button>
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button></td>
          <tr>
        </table>
      </div>
    </div>
  </div>
</div>
<!-- Top Like --> 

<!-- Top Unlike -->
<div class="modal fade " id="topunlike" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Top Unlike</h4>
      </div>
      <div class="modal-body">
        <table width="100%">
          <tr>
            <td colspan="3">Presentation Faculty of Science</td>
          </tr>
          <tr>
            <td width="32%" height="45em">Unlike</td>
            <td width="7%">:</td>
            <td width="61%"><input type="text" class="form-control" value="8122"></td>
          </tr>
          <tr>
            <td colspan="3" align="right"><button type="button" class="btn btn-warning">Save</button>
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button></td>
          <tr>
        </table>
      </div>
    </div>
  </div>
</div>
<!-- Top Unlike --> 

<!-- Top View -->
<div class="modal fade " id="topview" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Top View</h4>
      </div>
      <div class="modal-body">
        <table width="100%">
          <tr>
            <td colspan="3">Presentation Faculty of Science</td>
          </tr>
          <tr>
            <td width="32%" height="45em">Unlike</td>
            <td width="7%">:</td>
            <td width="61%"><input type="text" class="form-control" value="8122"></td>
          </tr>
          <tr>
            <td colspan="3" align="right" ><button type="button" class="btn btn-warning">Save</button>
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button></td>
          <tr>
        </table>
      </div>
    </div>
  </div>
</div>
<!-- Top View --> 


<!-- Custom JavaScript for the Menu Toggle --> 
<script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("active");
    });
</script> 


</body>
</html>